<template>
  <div>
    <!--面包屑-->
    <el-breadcrumb separator="/" style="padding-left: 10px;padding-bottom: 10px;font-size: 12px">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!--卡片-->
    <el-card class="box-card">

      <!--用户表单-->
      <el-form :inline="true" :model="UserVO" class="demo-form-inline">
        <el-form-item label="部门">
          <el-select v-model="UserVO.departmentId" placeholder="请选择">
            <el-option
                v-for="item in deptList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              <span style="float: left">{{ item.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">
                <el-tag type="success" effect="plain">{{ item.deptCount }}</el-tag>
</span>
            </el-option>

          </el-select>
        </el-form-item>

        <el-form-item label="用户名">
          <el-input clearable v-model="UserVO.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input clearable v-model="UserVO.email" placeholder="邮箱"></el-input>
        </el-form-item>
        <el-form-item>
          <el-radio v-model="UserVO.sex" label="0">男</el-radio>
          <el-radio v-model="UserVO.sex" label="1">女</el-radio>
          <el-radio v-model="UserVO.sex" label="">全部</el-radio>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input clearable v-model="UserVO.nickname" placeholder="请输入昵称"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="danger" icon="el-icon-refresh" @click="resetClick">重置</el-button>
          <el-button type="primary" icon="el-icon-search" @click="findUserList()">查询</el-button>
          <el-button type="success" icon="el-icon-plus" @click="show">添加</el-button>
          <el-button type="warning" icon="el-icon-download" @click="onSubmit">导出</el-button>
        </el-form-item>
      </el-form>
      <!--用户表格-->
      <el-table
          :data="userList"
          border
          max-height="450"
          style="width: 100%;">
        <el-table-column
            prop="id"
            label="ID"
            width="80">
        </el-table-column>
        <el-table-column
            prop="username"
            label="用户名"
            width="130">
        </el-table-column>
        <el-table-column
            prop="sex"
            label="性别"
            width="70"
            align="center"
        >
          <template slot-scope="scope">
            <span class="el-tag">
                            {{ scope.row.sex == 0 ? '男' : (scope.row.sex == 1 ? "女" : "保密") }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
            prop="deptname"
            label="所属单位"
            width="150"
            align="center">
        </el-table-column>
        <el-table-column
            prop="birth"
            label="生日"
            width="180"
            sortable>
        </el-table-column>
        <el-table-column
            prop="phoneNumber"
            label="电话"
            width="120"
            sortable>
        </el-table-column>
        <el-table-column
            prop="email"
            label="邮箱"
            sortable>
        </el-table-column>
        <el-table-column
            prop="status"
            label="是否禁用"
            width="80"
            align="center"
        >

          <template slot-scope="scope">
            <el-switch
                v-model="scope.row.status==1"
                active-color="#13ce66"
                inactive-color="#ff4949">
            </el-switch>
          </template>

        </el-table-column>
        <el-table-column
            prop=""
            label="操作"
            width="200"

        >
          <template slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-edit" @click="editDept(scope.row)"></el-button>
            <el-button type="success" size="mini" icon="el-icon-delete" @click="deleteUser(scope.row)"></el-button>
            <el-button type="warning" size="mini" icon="el-icon-s-tools" @click="allotRoles(scope.row.id)"></el-button>
          </template>

        </el-table-column>
      </el-table>
      <!--分页-->
      <el-pagination
          style="padding-top: 15px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current"
          :page-sizes="[6,10,20,30]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </el-card>
    <!--弹出添加用户-->
    <add-user @updateUserList="findUserList" :dialog-title="dialogTitle" :user-info="userInfo"
              :addOrUpdateVisible="addOrUpdateVisible" @showAddOrUpdate="showAddOrUpdate"></add-user>
    <!--弹出分配角色-->
    <el-dialog
        center
        title="分配角色"
        :visible.sync="isShowRoleDialog"
        width="45%"
        @close="coleRoles"

    >
      <!-- 穿梭框-->
      <el-transfer
          :props="{
           key: 'id',
           label: 'roleName'
               }"
          filterable
          filter-placeholder="请输入角色名"
          v-model="UserGetRoles"
          :data="unUserGetRoles"
          :titles="['未拥有', '已拥有']"
          :button-texts="['到左边', '到右边']">
      </el-transfer>
      <span slot="footer">
           <el-button @click="coleRoles">取 消</el-button>
            <el-button type="primary" @click="submitRoles">确 定</el-button>
       </span>
    </el-dialog>


  </div>
</template>

<script>
import {deleteUserById, findUserList, getRoleList, saveRoleByUserId} from "@/network/system/user";
import {findDeptAndCount} from "@/network/system/dept";
import addUser from "@/views/system/user/childComp/addUser";

export default {

  name: "User",
  data() {

    return {
      //当前页
      current: 1,
      //每页条数
      size: 6,
      //总条数
      total: 0,
      //部门信息
      deptList: [],
      //打开
      addOrUpdateVisible: false,
      //是否显示分配角色弹窗
      isShowRoleDialog: false,
      userInfo: {},  //行用户信息
      dialogTitle: '',
      UserVO: {
        username: '',
        departmentId: '',
        sex: '',
        email: '',
        nickname: ''
      },
      //用户列表
      userList: [],
      //用户未拥有权限
      unUserGetRoles: [],
      UserGetRoles: [],
      rowId:undefined
    }
  },
  components: {
    addUser
  }, created() {
    this.findUserList();
    this.findDeptAndCount()
  },
  methods: {

    deleteUser(data) {
      this.$confirm('此操作将永久删除 ' + data.username + ', 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteUserById(data.id).then((res) => {

          if (res.success) {
            //刷新用户列表
            this.findUserList();
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          } else {
            this.$message.error('错了哦，这是一条错误消息');
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    editDept(data) {
      this.dialogTitle = '修改用户信息'
      this.userInfo = data
      this.addOrUpdateVisible = true
    },
    // 按钮点击事件 显示弹窗组件
    show() {
      this.dialogTitle = '添加新用户'
      this.addOrUpdateVisible = true
      this.userInfo = {}
    },
    // 监听 子组件弹窗关闭后触发，有子组件调用
    showAddOrUpdate(data) {
      if (data === 'false') {
        this.addOrUpdateVisible = false
      } else {
        this.addOrUpdateVisible = true
      }

      this.userInfo = {}
    },
    //重置查询条件
    resetClick() {
      this.UserVO.username = ''
      this.UserVO.departmentId = ''
      this.UserVO.email = ''
      this.UserVO.nickname = ''
      this.UserVO.sex = ''
      this.findUserList()
    },
    //获取部门信息
    findDeptAndCount() {
      findDeptAndCount().then((res) => {
        this.deptList = res.data.deptList
      })
    }
    ,
    //获取用户信息
    findUserList() {
      // 计算出总页数
      let count = Math.ceil(this.total / this.size)
      if (this.current === count && this.userList.length === 1) {
        this.current = this.current - 1
      }
      findUserList(this.current, this.size, this.UserVO).then((res) => {
        this.userList = res.data.userList
        this.total = res.data.total
      })


    }
    ,
    onSubmit() {
      console.log('submit!');
    },
    handleSizeChange(val) {
      //设置每页几条数据
      this.size = val;
      this.findUserList();
    },
    handleCurrentChange(val) {
      //设置当前页
      this.current = val;
      this.findUserList();
    },
    /*控制分配角色弹窗*/
    coleRoles() {
      this.isShowRoleDialog = false
      this.UserGetRoles = []
      this.unUserGetRoles =[]
      this.rowId=undefined
    },
    submitRoles() {
      console.log("提交")
      console.log(this.rowId)
      console.log(this.unUserGetRoles)
      console.log(this.UserGetRoles)

      this.$confirm('是否执行分配?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        saveRoleByUserId(this.rowId,this.UserGetRoles).then((res) => {
          if (res.success){
          this.$message({
            type: 'success',
            message: '分配角色角色!'
          });}else {
            this.$message.error("分配角色失败")
          }
        },error => {
          this.$message.error("分配角色失败")
        })

        this.coleRoles()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消分配角色'
        });
      });



    },
    /*分配角色*/
    allotRoles(id) {
      this.isShowRoleDialog = true
      getRoleList(id).then((res) => {
        this.UserGetRoles = res.data.userRoleIdList
        this.unUserGetRoles = res.data.roleList
        this.rowId=id
      })
    }
  }
}
</script>

<style scoped>

</style>